{% load static %}
<!DOCTYPE html>
<html>
  <head>

        <!-- CSS Additional Files -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static 'css/mvt/style.css' %}">


    <!-- JavaScript Additional Files -->
    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/typeit.js' %}"></script>
    <script src="{% static 'js/mvt/demo.js' %}"></script>


    <title>Memory Management</title>

  </head>
  <script>
      var totalMemory = {{ totalMemory }};
      var totalMemoryQueue = {{ inputMemory }};
  </script>

  <body>

    <div class="container-fluid">
      <div id="page-heading">
          <h1>Multiprogramming With Variable Number of Tasks <br> </h1>
      </div>
      <div id="selection-form">
          <button type="button" id="first-fit-select" class="btn btn-default">First-Fit</button>
          <button type="button" id="best-fit-select" class="btn btn-default">Best-Fit</button>
          <button type="button" id="worst-fit-select" class="btn btn-default">Worst-Fit</button>
      </div>

      <div id="demo-box">
          <div class="col-sm-6" id="left-box">
              <div class="col-sm-6">
                  <h4>Main Memory</h4>
                  <div id="block-0">
                    <div id = "block--1"> </div>
                  </div>
              </div>
              <div class="col-sm-6">
                  <h4>Input Queue</h4>
                  <div id="input-q-box">
                  </div>
                  <br>
                  <button class="btn btn-info" id="add-process-button">Add Process</button>
              </div>
          </div>
          <div class="col-sm-6" id="right-box">
              <div class="row" id="top-box">
                  <h3>Output Table</h3>
                  <table class="table table-striped" id="output-table">
                    <thead>
                      <tr>
                        <th>Process No.</th>
                        <th>Process Size</th>
                        <th>Allocation Status</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
              </div>
              <div class="row" id="bottom-box">
                <div id="terminal-header" style="text-align: center;">
                    <div class="col-sm-3"></div>
                    <div class="col-sm-6">Terminal - log.txt</div>
                    <div class="col-sm-3"></div>
                </div>
                <div id="terminal-body">

                </div>
              </div>
          </div>
      </div>

  </body>

</html>
